<template>
  <div class="yl-table-list">
    <el-table
      v-loading="loading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :data="tableData"
      :header-cell-style="headerStyle"
    >
      <el-table-column
        v-for="(item, index) in config"
        :key="index"
        show-overflow-tooltip
        align="center"
        :prop="item.prop"
        :label="item.label"
      >
      </el-table-column>

      <el-table-column  v-if="innerBtnGroup && innerBtnGroup.length > 0" fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            v-for="(btn, index) in innerBtnGroup"
            :key="index"
            :type="btn.type"
            fixed="right"
            size="mini"
            @click="handleInnerBtn(btn.method, scope.row.id, scope.row, btn.api, btn.url)"
          >
            <span>{{ btn.name }}</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <YlPage
      :page="page"
      :size="pageSize"
      :total="total"
      @current-page="getCurrentPage"
      @page-size="getPageSize"
    ></YlPage>
  </div>
</template>

<script>
import {
  verifyUrl
} from '@/utils/verifiable'

export default {
  name: 'YlTable',
  props: {
    tableConfig: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      loading: true,
      tableData: [],
      api: '',
      innerBtnGroup: this.tableConfig.innerBtn,
      page: 1,
      pageSize: 10,
      total: 0
    }
  },
  computed: {
    // table column 配置
    config () {
      return this.tableConfig.columns
    },

    hasParams () {
      return this.tableConfig.form
    },

    // table 自定义表头样式配置
    headerStyle () {
      let style = {
        background: '#F1F5F7',
        fontWeight: '500',
        fontFamily: 'Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif'
      }
      return style
    }
  },
  mounted () {
    if (this.tableConfig.api) {
      this.api = this.tableConfig.api
      this.loadData()
    }
  },
  methods: {
    // 初始化数据
    initData () {
      this.loading = true
    },

    // 数据加载
    loadData () {
      this.initData()
      // 之后创建 YlForm组件 或 在父级直接写入form
      // 使用Object.assign 或 拓展运算符合并参数
      let data = {
        page: this.page,
        paegSize: this.pageSize,
        ...this.hasParams
      }

      this.api(data).then(res => {
        let data = res
        this.tableData = data.list
        this.page = data.page
        this.pageSize = data.pageSize
        this.total = data.total
        this.loading = false
      })
    },
    // 每页显示条数
    getPageSize (val) {
      this.pageSize = val
      this.loadData()
    },
    // 下一页
    getCurrentPage (val) {
      this.page = val
      this.loadData()
    },
    // table内部按钮配置
    handleInnerBtn (method, id, row, api, url) {
      if (method) {
        switch (method) {
          case 'add':
            this.addNewData(api)
            break

          case 'delete':
            this.deleteData(id, api)
            break

          case 'change':
            this.changeSingleData(id, api)
            break

          case 'show':
            this.showProjectInfo(id, api, url)
            break

          default:
            this.$emit(method, id, row, api)
            break
        }
      } else {
        this.$emit(method, id, row, api)
      }
    },

    // 新增
    addNewData (api) {
      api().then(res => {
        console.log(res)
      })
    },

    // 删除
    deleteData (id, api) {
      this.$confirm('此操作将永久删除改行信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api().then(res => {
          console.log(res)
        })
      }).catch(err => {
        console.log(err)
        this.$modal.info(this, '操作已取消')
      })
    },

    // 查看详情
    showProjectInfo (id, api, url) {
      if (verifyUrl(url)) {
        window.location.href = url
      } else {
        this.$router.push(url)
        // dialog 弹窗暂无
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
